<template>
    <div>
        <div class="container-404">
            <div>
                <img
                    v-if="error.statusCode === 404"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/seo/404.png"
                    class="img404"
                    alt="小竹财税"
                />
                <img
                    v-else
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/seo/500.png"
                    class="img500"
                    alt="小竹财税"
                />
                <div class="text1">
                    <template v-if="error.statusCode === 404">
                        您访问的页面在云端不见了~
                    </template>
                    <template v-else> 服务器异常… </template>
                </div>
                <!-- <div class="time">
                    即将离开本页，
                    <span>{{ timeSum }}</span>
                    秒后自动返回首页
                </div> -->
                <div class="buts">
                    <nuxt-link to="/">
                        <el-button type="primary" class="but">
                            返回首页
                        </el-button>
                    </nuxt-link>
                    <el-button v-if="goBack" type="primary" plain class="but">
                        返回上一页
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
  
  <script>
export default {
    components: {},
    props: ["error"],
    layout: "blog", // 你可以为错误页面指定自定义的布局
    data() {
        return {
            timeSum: 3,
        };
    },
    mounted() {
        // this.daojishi(3);
    },
    methods: {
        daojishi(timeSum) {
            if (timeSum == -1) {
                if (window.history.length > 1) {
                    // 如果存在上一页，则使用浏览器后退功能
                    this.$router.back();
                } else {
                    // 如果不存在上一页，则跳转到首页
                    this.$router.push("/"); // 假设你的首页路由是 '/'
                }
                return;
            }
            this.timeSum = timeSum;
            setTimeout(() => {
                this.daojishi(timeSum - 1);
            }, 1000);
        },
        goBack() {
            this.$router.back();
        },
    },
};
</script>
<style lang="scss" scoped>
.container-404 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 80px - 40px);
    text-align: center;
    background: #ffffff;
    .img404 {
        width: 336px;
        height: 199px;
    }
    .img500 {
        width: 268px;
        height: 196px;
    }
    .text1 {
        font-weight: 400;
        font-size: 26px;
        color: #1776ff;
        line-height: 38px;
        text-align: left;
        padding-top: 30px;
    }
    .time {
        padding-top: 55px;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        span {
            color: #1776ff;
        }
    }
    .buts {
        padding-top: 40px;
        display: flex;
        justify-content: center;
        .but {
            margin: 0 17px;
            display: block;
        }
    }
}
</style>